<template>
	<view class="indexContainer">
		<!-- 搜索 -->
		<view class="header">
			<image src="../../static/images/logo.png"></image>
			<view class="searchInput">
				<i class="iconfont icon-sousuo"></i>
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
			<button>登录</button>
		</view>
		<!-- 导航 -->
		<scroll-view scroll-x="true" enable-flex class="navScroll">
			<view class="navItem" :class="{active:navId === -1}" @click="changeNav(-1)">推荐</view>
			<view 
				class="navItem" 
				v-for="kingKong in kingKongList" 
				:key='kingKong.L1Id'
				:class="{active:navId === kingKong.L1Id}"
				@click="changeNav(kingKong.L1Id)"
				>
					{{kingKong.text}}
				</view>
		</scroll-view>
		
		<!-- 滑块 -->
		<scroll-view class="recommendScroll" >
			<recommend />
		</scroll-view>
		
		
	</view>
</template>

<script>
	import recommend from '../../components/recommed/recommend.vue';
	import { mapActions, mapState, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				navId: -1
			}
		},
		components:{
			recommend
		},
		created() {
			this.getInitData();
		},
		methods: {
			...mapActions(['getInitData']),
			changeNav(id){
				this.navId = id
			}
		},
		computed:{
			...mapState({
				initData: state => state.initData.initData
			}),
			...mapGetters(['kingKongList'])
		}
	}
</script>

<style lang="stylus">
	.indexContainer
		.header
			display flex
			padding 10upx 0
			image
				width 140upx
				height 40upx
				margin 10upx 20upx
			.searchInput
				height 60upx
				background-color #eee
				position relative
				input
					margin-left 50upx
					height 60upx
				.iconfont
					font-size 30upx
					position absolute
					left 10upx
					top 25%
				.placeholder
					font-size 28upx
					text-align center
			button
				width 144upx
				height 60upx
				font-size 24upx
				color #b4282d
				line-height 60upx
				text-align center
				margin 0 20upx
		.navScroll
			display flex
			white-space nowrap
			height 80upx
			margin-bottom 10upx
			.navItem
				width 200upx
				height 100%
				line-height 80upx
				margin 0 20upx
				padding 0 20upx
				text-align center
				display inline-block
				font-size 28upx
				box-sizing border-box
				&.active
					border-bottom 1upx red solid
					
		
</style>
